<template>
	<view class="wrapper">
		<view class="m-search-history-top" v-if="history.length != 0">
			<view class="u-search-titie">
				搜索历史
			</view>
			<image class="u-search-delete" @tap="delHistory" src="../../../static/icons/search-delete.png"></image>
		</view>
		<view class="g-search-history-content">
			<view class="u-history" v-for="(item,index) in history" :key="index" :data-key="item" @tap="historyTap">{{item}}</view>
		</view>
		<view class="no-data" v-if="history.length == 0">暂无搜索记录</view>
	</view>
</template>

<script>
// import util from '@/components/amap-wx/js/util.js';

export default {
	data() {
		return {
			history: [],
			searchText:''
		};
	},
	onLoad() {
		this.history = uni.getStorageSync('history');
	},
	methods: {
		/**
		 * 列表点击
		 */
		historyTap(e) {
		    let key = e.currentTarget.dataset.key;
		    uni.navigateTo({
		        url: '/pages/jewel/goods/prolist?keyword=' + key
		    });
		},
		/**
		 * 清理历史搜索数据
		 */
		delHistory() {
			uni.showModal({
				title: '提示',
				content: '是否清理全部搜索历史？',
				success: res => {
					if (res.confirm) {
						this.history = [];
						uni.removeStorage({
							key: 'history'
						});
					}
				}
			});
		}
	},
	/**
	 * 当 searchInput 输入时触发
	 */
	onNavigationBarSearchInputChanged(e) {
		let that = this
		that.searchText = e.text;
	},
	/**
	 * 点击软键盘搜索按键触发
	 */
	onNavigationBarSearchInputConfirmed(e) {
		let searchText = e.text
		let origin = uni.getStorageSync('history') || [];
		if (!searchText) {
		    uni.showToast({
		    	title:'请输入关键字'
		    })
		    return false;
		}
		if (!origin.includes(searchText)) {
		    origin.push(searchText);
		    this.history = origin;
		}
		if (origin.length >= 15) {
		    origin.length = 15;
		}
		uni.setStorage({
		    key: 'history',
		    data: origin,
		});
		uni.navigateTo({
			url: '/pages/jewel/goods/prolist?keyword=' + this.searchText
		})
	},
	/**
	 *  点击导航栏 buttons 时触发
	 */
	onNavigationBarButtonTap() {
		uni.navigateBack()
	}
};
</script>

<style>
	.g-search-history {
	    width: 90%;
	    height: 100%;
	    margin: 0 auto;
	    overflow: hidden;
	}
	
	.m-search-history-box {
	    border-bottom: 2rpx solid #f1f1f1;
	    width: 100%;
	}
	
	.m-search-history-top {
	    margin: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.u-search-titie {
	    font-size: 32rpx;
	}
	
	.u-search-delete {
	    width: 44rpx;
	    height: 44rpx;
	}
	
	.g-search-history-content {
	    margin: 0 30rpx;
	}
	
	.u-history {
	    height: 70rpx;
	    width: auto;
	    text-align: center;
	    border-radius: 25rpx;
	    background: #f5f5f5;
	    color: #5b5b5b;
	    line-height: 70rpx;
	    font-size: 28rpx;
	    margin-right: 29rpx;
	    margin-bottom: 30rpx;
	    float: left;
	    padding: 0rpx 30rpx;
	}
	.no-data{
		text-align: center;
		color: #333333;
		font-size: 32rpx;
		padding: 50rpx 0;
	}
</style>
